<template>
  <div class="lay-ot">
    <div class="layout">
      <load :state="loading"></load>
      <div class="headContainer">
        <img class="avatar" :src="avatar"/>
        <div class="info">
          <span class="userName" v-text="getUserName"></span><br/>
          <span class="userId" v-text="getUserUid"></span>
        </div>
      </div>
      <div class="main">
        <!--<img :src="userCode">-->
        <img :src="getQrcode" class="code">
      </div>
      <div class="footer">
        <div class="footer_top">
          <span>识别图中二维码</span><br/>
          <span>开启个人零售新时代</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Load from '../../components/common/load/load';

  export default {
    name: 'userQrcode',
    components: {Load},
    data() {
      return {
        loading: false,
        avatar: this.$store.state.login.userPic,
        userUid: this.$store.state.login.userUid,
        userName: this.$store.state.login.userName,
        userCode: '',
        codeUrl: ''
      };
    },
    computed: {
      getUserName() {
        return '昵称:  ' + this.userName;
      },
      getUserUid() {
        return 'ID:  ' + this.userUid;
      },
      getQrcode() {
        return this.codeUrl;
      }
    },
    created() {
      // 调用获取显示权限接口方法
      // let data = {
      //   url: 'http://localhost:8080/wx_login'
      // };
      this.loading = true;
      this.$UserReq.getUserCode().then(res => {
        this.loading = false;
        console.log('getUserCode:---------', res);
        this.codeUrl = res.data.qr;
        this.userName = res.data.nick;
        this.avatar = res.data.head;
        this.userUid = res.data.uid;
      }, (err) => {
        // this.loading = true;
        this.$router.go(-1);
        console.log('getUserCode:-err', err);
      });
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .lay-ot
    background: linear-gradient(to bottom right, #923df0, #721fd9); /* 标准的语法（必须放在最后） */
    .layout
      flex-y()
      width vw(375)
      height vw(667)
      font-family: PingFangSC-Regular
    .headContainer
      flex-y()
      position absolute
      top vw(31)
    .avatar
      box-sizing border-box
      width vw(48)
      height vw(48)
      border-radius(9vw)
    .info
      line-height vw(21)
      word-vw(15, white)
      margin-top vw(12)
      text-align center
    .main
      position absolute
      top vw(164)
      width vw(148)
      height vw(148)
      flex-center()

    .code
      width vw(148)
      height vw(148)
    .footer
      position absolute
      top vw(322)
      text-align center
      line-height vw(20)
      word-vw(14, white)
</style>
